<template>
  <div class="LeftTwo">
    <div class="per" v-for="(per, index) in list" :key="index">
      <span class="numbers aligncenter">{{ per.title }}</span>
      <img class="img aligncenter" :src="per.icon" alt="" />
      <!-- <img v-if="per.level===1" class="img aligncenter" src="../assets/v5_red.png" alt="">
      <img v-if="per.level===2" class="img aligncenter" src="../assets/v5_gray.png" alt=""> -->
      <span class="num aligncenter">{{ per.num }}</span>
    </div>
  </div>
</template>

<script>
import { getLeftTwo } from "../assets/api/api";
export default {
  data() {
    return {
      lefttwodata: [],
      timer: null,
    };
  },
  computed: {
    list() {
      let data = this.lefttwodata || [];
      let arr = data.map((item) => {
        if (item.level === 0) {
          item.icon = require("../assets/v5_green.png");
        }
        if (item.level === 1) {
          item.icon = require("../assets/v5_red.png");
        }
        if (item.level === 2) {
          item.icon = require("../assets/v5_gray.png");
        }
        return item;
      });
      return arr;
    },
    // img() {
    //         if (this.lefttwodata === 0) {
    //             return require("../assets/v5_green.png")
    //         }else if(this.color === 1){
    //             return require("../assets/v5_red.png")
    //         }else{
    //             console.log(this.per&&this.per.level)
    //             return require("../assets/v5_gray.png")
    //         }
    //     }
  },
  created() {
    this.fetchData();
    this.timer = setInterval(() => {
      this.fetchData();
    }, this.schedule);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    fetchData() {
      getLeftTwo().then((res) => {
        this.lefttwodata = res.data.result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.LeftTwo {
  .aligncenter {
    align-self: center;
  }
  margin-top: 52px;
  margin-left: 19px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .per {
    margin-right: 12px;
    margin-bottom: 40px;
    background-image: url("../assets/v5_扫描.gif");
    width: 330px;
    height: 92px;
    display: flex;
    color: white;
    .numbers {
      margin-left: 28px;
      margin-right: 32px;
      width: 150px;
      font-family: SourceHanSansCN-Regular;
      font-size: 25px;
    }
    .img {
      width: 28px;
      height: 28px;
      margin-right: 3.5px;
    }
    .num {
      font-family: SourceHanSansCN-Medium;
      font-size: 30px;
    }
  }
}
</style>
